import { useEffect, useRef, useState } from 'react';
import {
  View,
  Text,
  Image,
  Button
} from '@tarojs/components';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import './index.css';

const ModalMyFace = (props) => {
  const [active,setActive] = useState(true)
  let {
    template,
    num,
    leftface,
    rightface,
    templateName,
    templateUse,
    leftName,
    rightName,
    current
  } = props;

  useShareAppMessage((res)=>{
    if (res.from == 'button') {
      onPostInvitations();
      let url = `/pages/index/index`
      if (num == 2) {
        url = `/pages/index/index?type=sharetmpl_id=${current}&num=${number}&leftface=${leftface}&backdrop_img=${tmpl_img}&template=${tmpl_img}&rightface=${rightface}&tmpl_name=${templateName}&use_num=${templateUse}&leftName=${leftName}&rightName=${rightName}`
      }
      return {
        title: '快来围观我的写真吧',
        desc: '快来围观我的写真吧',
        path: url,
        imageUrl: 'https://jala-test-images.sndaurl.cn/images/share_img.png'
      }
    }
  })

  useEffect(()=>{
    if (num == 1) {
      leftface ? setActive(true) : setActive(false);
    } else {
      leftface && rightface ? setActive(true) : setActive(false);
    }
  }, [num, leftface, rightface])

  const onShowTask = () => {
    props.onClick && props.onClick();
  }

  const onMakeing = () => {
    props.onMakeing && props.onMakeing();
  }

  const doUpload = (key) => {
    props.onUpload && props.onUpload({type: key});
  }

  const onRemove = (key) => {
    props.onRemove && props.onRemove({type: key});
  }

  const renderFace = (val, type) => {
    if (val) {
      return (
        <View className='modal_myface_list_section' onClick={(e)=>{e.stopPropagation()}}>
          <View className='modal_myface_list_item'>
            <Image
              src={val}
              className='modal_myface_list_item_img'
              mode='aspectFill'
            />
            <View className='modal_myface_list_item_del' onClick={()=>{onRemove(type)}}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/removeIcon.png'
                className='modal_myface_list_item_del_icon'
                mode='aspectFill'
              />
            </View>
          </View>
          <View className='modal_myface_list_section_text'>{type == 'leftface' ? leftName : rightName}</View>
        </View>
      )
    } else {
      return (
        <View className='modal_myface_list_section' onClick={()=>{doUpload(type)}}>
          <View className='modal_myface_list_item upload'>
            {
              num == 2 ? (
                <View className='modal_myface_list_item_tip'>{type == 'leftface' ? '左边' : '右边'}</View>
              ) : null
            }
            <Image
              src='https://jala-test-images.sndaurl.cn/images/add.png'
              className='modal_myface_list_item_add'
              mode='aspectFill'
            />
            {/* <View className='modal_myface_list_item_text'>点击上传</View> */}
            <View className='modal_myface_list_item_text'>点击选择</View>
          </View>
        </View>
      )
    }
  }

  const onShare = () => {
    if (num == 2 && (leftface || rightface)) {
      Taro.requestSubscribeMessage({
        tmplIds: ['MSG1673394161867299902733677512986'],
        success(res) {
          props.onShare && props.onShare();
        },
        fail(error) {
          Taro.showToast({
            title: "订阅失败",
            icon: "fail",
          });
          props.onShare && props.onShare();
        }
      });
    }
  }

  return (
    <View
      className='maskView'
      onClick={()=>{props.onClose && props.onClose();}}
    >
      <View className='modal_myface' onClick={(e)=>{e.stopPropagation()}}>
        <View className='modal_myface_img'>
          <Image
            src={template}
            className='modal_myface_img_detail'
            mode='aspectFill'
          />
        </View>
        <View className='modal_myface_name'>{templateName}</View>
        <View className='modal_myface_desc'>已有{templateUse}人使用</View>
        <View className='modal_myface_invite'>
          选择我的脸部档案
          {
            leftface && rightface ? null : (
              <button
                open-type="share"
                className='modal_myface_invite_action'
                onClick={()=>{onShare()}}
              >
                邀请好友生成
              </button>
            )
          }
        </View>
        {
          num == 1 ? (
            <View className='modal_myface_list'>
              {renderFace(leftface, 'leftface')}
            </View>
          ) : (
            <View className='modal_myface_list'>
              {renderFace(leftface, 'leftface')}
              {renderFace(rightface, 'rightface')}
            </View>
          )
        }

        <View className='modal_myface_line'></View>
        <View className='modal_myface_footer'>
          <View className='modal_myface_footer_info'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/hourglass.png'
              className='modal_myface_footer_info_icon'
              mode='aspectFill'
            />
            <View className='modal_myface_footer_info_detail'>
              <View className='modal_myface_footer_info_detail_tip'>预计消耗时间</View>
              <View className='modal_myface_footer_info_detail_desc'>
                <Text className='modal_myface_footer_info_detail_desc_num'>5</Text>秒钟
              </View>
            </View>
          </View>
          <View
            className={`modal_myface_footer_btn ${active ? 'active' : ''}`}
            onClick={()=>{onMakeing()}}
          >
            妆容生成
          </View>
        </View>
      </View>
    </View>
  )
}

export default ModalMyFace;
